<template>
  <div class="cr-contianer">
    <div class="title">关联路径模块</div>
    <div style="height: 100%; position: relative">
      <el-input v-model="searchContent" class="search-container">
        <el-button
          slot="append"
          icon="el-icon-search"
          @click.native="searchInput"
        />
      </el-input>
      <el-table
        ref="relativeTable"
        :data="tableData"
        height="300px"
        use-virtual
        stripe
        border
        highlight-current-row
        style="width: 100%; border-bottom: 1px solid #eee"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"
        />
        <el-table-column label="路径名称" align="center" fixed="left">
          <template slot-scope="scope">
            {{ scope.row.pathname }}
          </template>
        </el-table-column>
        <el-table-column label="点检项" align="center">
          <template slot-scope="scope">
            {{ scope.row.itemcount }}
          </template>
        </el-table-column>
        <el-table-column label="执行周期" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.period }}</span>
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.pathstatus | statusFilter">{{
              scope.row.pathstatus | formatItemStatus
            }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="table-footer">
      <el-button :disabled="currentPage <= 1" @click.native="changePage('up')"
        >上一页</el-button
      >
      <el-button
        :disabled="currentPage >= totalPage"
        @click.native="changePage('down')"
        >下一页</el-button
      >
    </div>
    <div class="dialog-footer">
      <el-button @click="closeView">取消</el-button>
      <el-button type="primary" @click="confirmClick">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getPathLineAPI } from "@/api/pathLine";
export default {
  name: "RelativePathItem",

  props: {
    show: {
      type: Boolean,
      default: false,
    },
    /** 多选框 只能选一个 */
    radio: {
      type: Boolean,
      default: true,
    },

    /** 已选信息 */
    selectedData: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      searchContent: "", // 输入内容
      currentPage: 1, // 当前页数
      totalPage: 1, // 总页数
      tableData: [],

      otherItems: [],
      selectedItem: [], // 勾选的数据 点击确定 传递给父组件
    };
  },

  watch: {
    show: {
      handler(val) {
        if (val) {
          this.getList();
        }
      },
      deep: true,
      immediate: true,
    },
    // 选择
    selectedData: function () {
      this.checkItemsWithSelectedData();
    },
  },

  methods: {
    /**
     * 关闭操作
     */
    closeView() {
      this.$emit("close");
    },

    // 进行搜索操作
    searchInput() {
      this.currentPage = 1;
      this.totalPage = 1;
      this.getList();
    },
    getList() {
      let params = {
        pagenum: this.currentPage - 1,
        pagesize: 10,
      };
      params.keywords = this.searchContent;
      getPathLineAPI({
        ...params,
      }).then((res) => {
        this.tableData = res.Data;
        this.totalPage = Math.ceil(res.Total / 10);
        if (this.selectedData) {
          this.checkItemsWithSelectedData();
        }
      });
    },

    changePage(type) {
      if (type == "up") {
        this.currentPage = this.currentPage - 1;
      } else if (type == "down") {
        this.currentPage = this.currentPage + 1;
      }
      if (this.currentPage <= this.totalPage && this.currentPage >= 1) {
        this.getList();
      }
    },

    // 标记选择数据
    checkItemsWithSelectedData() {
      const selectedArray = this.selectedData
        ? this.selectedData.map((item) => {
            item.has = false;
            return item;
          })
        : [];

      const selectedRows = [];
      this.otherItems = [];

      this.tableData.forEach((item, index) => {
        selectedArray.forEach((selectedItem, selectedIndex) => {
          if (item.itemid == selectedItem.itemid) {
            item.itemsort = selectedItem.itemsort || "";
            selectedItem.has = true;
            selectedRows.push(item);
          }
        });
      });

      selectedArray.forEach((selectedItem, selectedIndex) => {
        if (!selectedItem.has) {
          this.otherItems.push(selectedItem);
        }
      });

      this.$nextTick(() => {
        this.$refs.relativeTable.clearSelection();
        selectedRows.forEach((row) => {
          this.$refs.relativeTable.toggleRowSelection(row, true);
        });
      });
    },

    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      if (this.radio) {
        val.forEach((row, index) => {
          if (index === val.length - 1) return;
          this.$refs.relativeTable.toggleRowSelection(row, false);
        });
        if (val.length === 0) {
          this.selectedItem = [];
        } else {
          this.selectedItem = val.length === 1 ? val : [val[val.length - 1]];
        }
        this.$emit("changeCheckout", this.selectedItem);
      } else {
        this.selectedItem = this.otherItems.concat(val);
      }
    },

    /**
     * 确定选择
     */
    confirmClick() {
      // 以单类型传值
      if (!this.radio) {
        this.$emit("changeCheckout", this.selectedItem);
      }
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.cr-contianer {
  // height: 450px;
  position: relative;
  padding: 50px 0 10px 0;
}
.title {
  padding: 0 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  border-bottom: 1px solid #e6e6e6;
}
.search-container {
  margin: 10px 0;
  width: 200px;
}
//表尾 上一页按钮
.table-footer {
  padding: 8px 20px 0 0;
}
.dialog-footer {
  text-align: right;
  margin-top: 10px;
  margin-right: 10px;
}
</style>